<template>
	<view>
		<view v-if="pinglinlistdata.data==''">
			<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 240rpx;" >
				 <image src="https://static-tool.77.top/static/null-image.png" mode=""  style="width: 390.13rpx;height: 299.29rpx;margin-right: 80rpx;"></image>
				 <view style="font-size: 28rpx;color: #2E3033;font-weight: bold;margin-top: 48rpx;">你尚未发布任何评论哟~</view>
			</view>
			
		</view>
		<view class="u-page" v-if="pinglinlistdata.data!=''">
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item,index) in (pinglinlistdata?.data || [])" :key="index">
					<view class="pinglunstyle">
						<image src="/static/image/more@2x (1).png" mode="" style="width: 64rpx;height: 64rpx; position: absolute; right: 0; top: 10px;"
							@click="handleOpenDetail(item)"></image>
						<view >
							<image style="width: 80rpx;height: 80rpx;border-radius: 40rpx 40rpx 40rpx 40rpx;" alt=""
								:src="item.user.avatar" />
						</view>

						<view style="margin-left: 24rpx;flex: 1;">
							<view style="font-size: 24rpx;color: #17181A;font-weight: bold;">{{item.user.username}}</view>
							<view style="margin-top: 12rpx;color: #AEB0B3;font-size: 22rpx;">{{item.createtime && timeAgo(item.createtime)}}评论了{{item.type==0 ?'卡组' :'卡牌'}} </view>
							<view style="font-size: 30rpx;color: #47494D;margin-top: 8rpx; word-break: break-all;">
								{{item.content}}
							</view>
							<view class="youxilist" @click="handleOpen(item)" v-if="item.object">
								<image v-if="item.object" :src="item.object.banner_image" mode="aspectFill"
									style="flex-shrink: 0;width: 96rpx; height: 96rpx;border-radius: 16rpx;margin-left: 16rpx;"></image>
									<image v-else :src="item.object.image" mode="heightFix"
										style="flex-shrink: 0;height: 96rpx;border-radius: 16rpx;margin-left: 16rpx;"></image>
								<view style="margin-left: 16rpx; flex: 1;">
									<view style="font-weight: bold;font-size: 24rpx;color: #17181A;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 60%;">{{item.object.name}}</view>
									<view class="count-list">
										<view class="count-item" v-for="(kap,indexs) in (item?.object?.statis?.rarity || [])" :key="indexs">
											<image style="	width: 24rpx;height: 24rpx;"
												:src="kap.image"
												mode="aspectFit"></image>
											<text
												style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #2E3033;">{{kap.count}}</text>
										</view>
									</view>
									<view class="count-item" style="margin-top: 8rpx;display: flex;align-items: center;">
										<image style="	width: 24rpx;height: 24rpx;"
											src="https://static-tool.77.top/static/cardGroup-bottle.png" mode=""></image>
										<text style="font-size: 20rpx;color: #2E3033">{{item.object.hecheng || item.object.amount}}</text>
									</view>
								</view>
							</view>
							<view style="width: 100%;display: flex;justify-content: space-between;">
								<view></view>
								<view style="display: flex;align-items: center;font-size: 20rpx;color: #7B7D80;margin-top: 26rpx;">
									<view>{{item.zan}}点赞</view>
									<image src="https://static-tool.77.top/static/zan-not.png" mode=""  style="width:48rpx;height:48rpx;margin-left: 10rpx;" ></image>
								</view>
							</view>
						</view>
					</view>

				</up-list-item>
			</up-list>
		</view>
	</view>
	<up-popup :show="showDelete" mode="bottom" @close="showDelete = false" round="15">
		<view style="height: 300rpx;background: #E8E9EB;border-radius: 30rpx;overflow: hidden;">
			<view
			@click="handleDelete"
				style="background: #ffffff;border-radius: 16rpx;padding: 16rpx 40rpx;display: flex;align-items: center;margin: 24rpx ;">
				<image src="/static/image/filled icon@2x (2).png" mode="" style="width: 40rpx;height: 40rpx;"></image>
				<view style="color: #B21212;font-size: 30rpx;margin-left: 24rpx;">删除此评论</view>
			</view>
			<view @click="showDelete = false"
				style="background: #ffffff;border-radius: 16rpx;padding: 16rpx 40rpx;display: flex;align-items: center;margin: 24rpx ;justify-content: center;">
				<view style="color: #2E3033;font-size: 30rpx;margin-left: 24rpx;text-align: center;font-weight: bold;"
					>取消</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import request from '@/http/index.js';
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import {
		formatDistanceToNow, isBefore
	} from 'date-fns'
	
	const currentComment = ref({})
	const showDelete = ref(false)
	const handleOpenDetail = (item) => {
		currentComment.value = item
		showDelete.value = true
	}
	const handleDelete = () => {
		request({
			url: 'api/user/comment_del',
			method: 'POST',
			data:{
				comment_id: currentComment.value.id
			}
		}).then(res => {
			if(res.code == 1){
				uni.showToast({
					title:res.msg || '删除成功！',
					icon: 'none'
				})
				showDelete.value = false
				page.value = 1
				pinglunData()
			}
		})
	}
	const timeAgo = (time) => {
	  const now = new Date();
	
	  // 计算时间差
	  const differenceInMillis = now - new Date(time);
	  const differenceInMinutes = Math.floor(differenceInMillis / (1000 * 60));
	  const differenceInHours = Math.floor(differenceInMillis / (1000 * 60 * 60));
	  const differenceInDays = Math.floor(differenceInMillis / (1000 * 60 * 60 * 24));
	
	  if (differenceInDays >= 1) {
	    return `${differenceInDays}天前`;
	  } else if (differenceInHours >= 1) {
	    return `${differenceInHours}小时前`;
	  } else if (differenceInMinutes >= 1) {
	    return `${differenceInMinutes}分钟前`;
	  } else {
	    return '刚刚';
	  }
	};
	const handleOpen = (item) => {
		if(item.type == 0){//卡组
		uni.navigateTo({
			url: `/homePackages/cardGroupDetail?id=${item.object.id}&name=${item.object.name}`
		})
		}else{
			uni.navigateTo({
				url: `/homePackages/cardDetail?id=${item.object.dbfId}`
			})
		}
	}
	const raritySortMap = {
		'免费':'6',
		'基础': '5',
		'普通': '4',
		'稀有': '3',
		'史诗': '2',
		'传说': '1'
	}
	const rarityMap = {
		'基础': 'https://static-tool.77.top/static/cardGroup-green.png',
		'普通': 'https://static-tool.77.top/static/cardGroup-white.png',
		'稀有': 'https://static-tool.77.top/static/cardGroup-blue.png',
		'史诗': 'https://static-tool.77.top/static/cardGroup-purple.png',
		'传说': 'https://static-tool.77.top/static/cardGroup-orange.png',
		"地标":'https://static-tool.77.top/static/cardGroup-orange.png',
		'免费': 'https://static-tool.77.top/static/icon_rare@3x.png'
	}
		const pinglinlistdata = ref()
			const page = ref(1)
	const pinglunData = () => {
		let data = {
			page: page.value
		}
		request({
			url: 'api/user/comments',
			method: 'POST',
			data:data
		}).then(res => {
			res.data.data.forEach((item)=>{
				if(item.type==1){
					if(rarityMap[item.object.rarity_text]){
						item.object.statis = {}
						item.object.statis.rarity = []
						item.object.statis.rarity[0] ={
							image:rarityMap[item.object.rarity_text],
							count:item.object.rarity_text
						}
					}
				}else{
					if(item.object){
						item.object.statis.rarity.forEach((rarityItem) => {
							if (rarityMap[rarityItem.name]) {
								rarityItem.image = rarityMap[rarityItem.name];
								rarityItem.sort = raritySortMap[rarityItem.name];
							}
						});
						item.object.statis.rarity = item.object.statis.rarity.sort((a, b) => a.sort - b.sort)
					}
				}
			})
			if(page.value==1){
				pinglinlistdata.value = res.data
			}else{
						pinglinlistdata.value.data = pinglinlistdata.value.data.concat(res.data.data) 
			}
		})
	}
	//   onShow( () => {
	// 	pinglunData()
	// })
	onMounted(() => {
		console.log('onMounted');
		pinglunData()
	})

	const scrolltolower = () => {
		if(page.value<=pinglinlistdata.value.last_page){
				 page.value ++
				 	 pinglunData()
		}
	
	};
</script>

<style scoped>
	.pinglunstyle {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx 32rpx;
		display: flex;
		margin-top: 32rpx;
		position: relative;
	}

	.youxilist {
		width: 542rpx;
		height: 128rpx;
		background: #F7F8FA;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.count-list {
		margin-top: 8rpx;
		display: flex;
		align-items: center;
	}

	.count-item {
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		line-height: 24rpx;
	  
	}
</style>